<style>
.login_container{width:500px;margin:0 auto; margin-top:40px;border:1px solid #fff; padding:5px; box-shadow:2px 2px 2px 2px #888;border-radius:10px;}
.login_header{margin: -4px -6px 20px; height:30px;border-radius:10px 10px 0px 0px; padding-left:10px;}
input[type="text"]{border:2px solid #ddd;width:300px;padding:5px;}
input[type="password"]{border:2px solid #ddd;width:300px;padding:5px;}
.mar_t{margin-top:10px;}
p{margin:0px; padding:0px;}
.pad_l20{padding-left:30px;}
.let_btn{background:#efefef;padding:5px; margin:20px -5px -5px;border-radius:0px 0px 10px 10px;}
.float_l{float:left}
.float_r{float:right}
.btn_login{background:#0099ff;border-radius:2px; border:2px solid #0099ff; text-decoration:none;color:#fff;font-weight:bold;
padding:0px 16px 0px 16px; margin-right:2px;}
.pbody{
	height:400px;
}
</style>
<html>
	<body>
	<div class="pbody">
		<div class="login_container">
			<h3 class="sprited login_header" >Login Form</h3>
			<div class="pad_l20">
				<form id="loginForm" name="loginForm"  method="post"  >
					<div class="mar_t">
						<p><strong>Email:</strong></p>
						<input class="input-btn usr-name" type="text" id="usernameLogin" name="usernameLogin" placeholder="Email"/>&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorusernameLogin"></span>
					</div>
					<div class="mar_t">
						<p><strong>Password:</strong></p>
						<input class="input-btn usr-name" type="Password" id="passwdLogin"  name="passwdLogin" placeholder="Password"/>&nbsp;&nbsp;&nbsp;<span style="color:red" id="errorpasswdLogin"></span>
					</div>
				</form>            
			</div>
			<p style="color:red" id="loginFailed"></p>
			<div class="forgotReg">
				<div class="let_btn"><a href="javascript:void(0)"> Forgot your login details?</a>
					<a  class="btn_login float_r" href="javascript:void(0);" onclick="validateLogin()">Login</a>
				</div>				
			</div>
		</div>
	</div>
	</body>
</html>

  
<script type="text/javascript" charset="utf-8">	
	$('#passwdLogin').keypress(function(e){
		if( e.keyCode == 13 ){
			var flag=true;	
			if($('#usernameLogin').val()==""){		
				$('#errorusernameLogin').html('*Email Required');
				flag=false;
			}else{
				$('#errorusernameLogin').html('');
			}
			if($('#passwdLogin').val()==""){
				$('#errorpasswdLogin').html('*Password Required');
				flag=false;
			}else{
				$('#errorpasswdLogin').html('');
			}
			if(flag==false){ 
				return false;
			}else{ 
				var userEmail=$('#usernameLogin').val();
				var userPassword=$('#passwdLogin').val();
				$.ajax({
					type:'POST',
					url:   '/user/login',
					data:{userEmail:userEmail,userPassword:userPassword},
					success: function(data){
						if(data.output=='success'){
							$('#loginFailed').html('');
							window.location="/user/home";
						}else{
							$('#loginFailed').html('*Please Enter Valid Username And Password!');
						}
					}
				});
			}	
		}
	});
	function validateLogin(){
		var flag=true;	
		if($('#usernameLogin').val()==""){		
			$('#errorusernameLogin').html('*Email Required');
			flag=false;
		}else{
			$('#errorusernameLogin').html('');
		}
		if($('#passwdLogin').val()==""){
			$('#errorpasswdLogin').html('*Password Required');
			flag=false;
		}else{
			$('#errorpasswdLogin').html('');
		}
		if(flag==false){ 
			return false;
		}else{ 
			var userEmail=$('#usernameLogin').val();
			var userPassword=$('#passwdLogin').val();
			$.ajax({
				type:'POST',
				url:   '/user/login',
				data:{userEmail:userEmail,userPassword:userPassword},
				success: function(data){ 
					if(data.output=='success'){
						$('#loginFailed').html('');
						window.location="/user/home";
					}else{
						$('#loginFailed').html('*Please Enter Valid Username And Password!');
					}
				}
			});
		}	
	}
</script>